<template>
  <div class="module-box">
    <div class="box" style="flex:0 1 100%; margin: 5px;">
      <el-card class="box-card">
        <el-button type="success" @click="openAddDialog">新增车辆</el-button>
      </el-card>
    </div>

    <el-card class="box">
      <el-table :data="tableData" style="width:100%">
        <el-table-column prop="number" label="车辆自编号" />
        <el-table-column prop="plate" label="车牌号" />
        <el-table-column prop="date" label="车辆启动时间" />
        <el-table-column prop="check" label="状态" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteVehicle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑车辆对话框 -->
    <el-dialog title="编辑车辆" v-model="editDialogVisible" width="30%">
      <el-form :model="currentVehicle">
        <el-form-item label="车辆自编号">
          <el-input v-model="currentVehicle.number" placeholder="车辆自编号"></el-input>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="currentVehicle.plate" placeholder="车牌号"></el-input>
        </el-form-item>
        <el-form-item label="车辆启动时间">
          <el-date-picker v-model="currentVehicle.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="currentVehicle.check"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveVehicle">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增车辆对话框 -->
    <el-dialog title="新增车辆" v-model="addDialogVisible" width="30%">
      <el-form :model="newVehicle">
        <el-form-item label="车辆自编号">
          <el-input v-model="newVehicle.number" placeholder="车辆自编号"></el-input>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="newVehicle.plate" placeholder="车牌号"></el-input>
        </el-form-item>
        <el-form-item label="车辆启动时间">
          <el-date-picker v-model="newVehicle.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="newVehicle.check"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNewVehicle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const tableData = reactive([
  { id: 1, number: 'CL-492', plate: '鄂A1234', date: '2016-09-06', check: true },
  { id: 2, number: 'CL-888', plate: '鄂A5678', date: '2013-06-09', check: true },
  { id: 3, number: 'CL-463', plate: '鄂A1125', date: '2020-10-11', check: false },
  { id: 4, number: 'CL-853', plate: '鄂A4264', date: '2021-12-04', check: true },
  { id: 5, number: 'CL-688', plate: '鄂A6436', date: '2020-04-06', check: true },
  { id: 6, number: 'CL-246', plate: '鄂A7743', date: '2018-02-06', check: false }
]);

const editDialogVisible = ref(false);
const currentVehicle = reactive({});
const addDialogVisible = ref(false);
const newVehicle = reactive({
  number: '',
  plate: '',
  date: '',
  check: false
});

const openAddDialog = () => {
  addDialogVisible.value = true;
};

const saveNewVehicle = () => {
  const newVehicleData = {
    id: tableData.length + 1,
    ...newVehicle
  };
  tableData.push(newVehicleData);
  addDialogVisible.value = false;
  newVehicle.number = '';
  newVehicle.plate = '';
  newVehicle.date = '';
  newVehicle.check = false;
};

const openEditDialog = (vehicle) => {
  Object.assign(currentVehicle, vehicle);
  editDialogVisible.value = true;
};

const saveVehicle = () => {
  const index = tableData.findIndex(v => v.id === currentVehicle.id);
  if (index !== -1) {
    Object.assign(tableData[index], currentVehicle);
  }
  editDialogVisible.value = false;
};

const deleteVehicle = (vehicle) => {
  tableData.splice(tableData.indexOf(vehicle), 1);
};
</script>

<style scoped>
.module-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.box {
  flex: 0 1 100%;
  height: 100%;
  width: 100%;
  margin: 5px;
}

.box-card {
  width: 100%;
}

.el-table {
  width: 100%;
}
</style>